<style>
</style>
<template>
    <ly-page>
        <ly-navi title="步骤条"></ly-navi>
        <ly-page-content>
            <el-divider content-position="left">默认</el-divider>
            <ly-steps v-model="step">
                <ly-step>基础设置</ly-step>
                <ly-step>价格库存</ly-step>
                <ly-step>核销设置</ly-step>
                <ly-step>运营选项</ly-step>
            </ly-steps>
            <ly-code-view>
                <pre v-pre>
<ly-steps v-model="step">
    <ly-step>基础设置</ly-step>
    <ly-step>价格库存</ly-step>
    <ly-step>核销设置</ly-step>
    <ly-step>运营选项</ly-step>
</ly-steps>
                </pre>
            </ly-code-view>

            <el-divider content-position="left">带图标</el-divider>
            <ly-steps v-model="step">
                <ly-step><i class="fa fa-pencil-square"></i>基础设置</ly-step>
                <ly-step><i class="fa fa-pencil-square"></i>价格库存</ly-step>
                <ly-step><i class="fa fa-pencil-square"></i>核销设置</ly-step>
                <ly-step><i class="fa fa-pencil-square"></i>运营选项</ly-step>
            </ly-steps>
            <ly-code-view>
                <pre v-pre>
<ly-steps v-model="step">
    <ly-step><i class="fa fa-pencil-square"></i>基础设置</ly-step>
    <ly-step><i class="fa fa-pencil-square"></i>价格库存</ly-step>
    <ly-step><i class="fa fa-pencil-square"></i>核销设置</ly-step>
    <ly-step><i class="fa fa-pencil-square"></i>运营选项</ly-step>
</ly-steps>
                </pre>
            </ly-code-view>
            <el-divider content-position="left">el 样式</el-divider>
            <el-steps :active="step">
                <el-step title="步骤 1"></el-step>
                <el-step title="步骤 2"></el-step>
                <el-step title="步骤 3"></el-step>
                <el-step title="步骤 4"></el-step>
            </el-steps>
            <ly-code-view>
                <pre v-pre>
<el-steps :active="step">
    <el-step title="步骤 1"></el-step>
    <el-step title="步骤 2"></el-step>
    <el-step title="步骤 3"></el-step>
    <el-step title="步骤 4"></el-step>
</el-steps>
                    </pre>
            </ly-code-view>

            <el-divider content-position="left">el 样式(完成后打钩)</el-divider>
            <el-steps :active="step" finish-status="success">
                <el-step title="步骤 1"></el-step>
                <el-step title="步骤 2"></el-step>
                <el-step title="步骤 3"></el-step>
                <el-step title="步骤 4"></el-step>
            </el-steps>

            <ly-code-view>
                <pre v-pre>
<el-steps :active="step" finish-status="success">
    <el-step title="步骤 1"></el-step>
    <el-step title="步骤 2"></el-step>
    <el-step title="步骤 3"></el-step>
    <el-step title="步骤 4"></el-step>
</el-steps>
                </pre>
            </ly-code-view>
            <el-divider content-position="left">el 垂直样式</el-divider>
            <div>
                <el-steps :active="step" direction="vertical" style="height: 400px;margin-right: 300px;">
                    <el-step title="步骤 1"></el-step>
                    <el-step title="步骤 2"></el-step>
                    <el-step title="步骤 3"></el-step>
                    <el-step title="步骤 4"></el-step>
                </el-steps>
                <ly-code-view>
                    <pre v-pre>
<el-steps :active="step" direction="vertical" style="height: 400px;margin-right: 300px;">
    <el-step title="步骤 1"></el-step>
    <el-step title="步骤 2"></el-step>
    <el-step title="步骤 3"></el-step>
    <el-step title="步骤 4"></el-step>
</el-steps>
                    </pre>
                </ly-code-view>

            </div>

            <el-divider content-position="left">el 垂直样式(完成后打钩)</el-divider>


                <el-steps :active="step" direction="vertical" style="height: 400px" finish-status="success">
                    <el-step title="步骤 1"></el-step>
                    <el-step title="步骤 2"></el-step>
                    <el-step title="步骤 3"></el-step>
                    <el-step title="步骤 4"></el-step>
                </el-steps>
            </div>
            <ly-code-view>
                    <pre v-pre>
<el-steps :active="step" direction="vertical" style="height: 400px" finish-status="success">
    <el-step title="步骤 1"></el-step>
    <el-step title="步骤 2"></el-step>
    <el-step title="步骤 3"></el-step>
    <el-step title="步骤 4"></el-step>
</el-steps>
                        </pre>
            </ly-code-view>

            <ly-markdown>
                <pre v-pre>
## `ly-steps`
------

#### Attributes

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |
|  v-model | 当前的步骤	  |int |	|0	|


## `ly-step`
-------
#### slot
| 名称 |说明   |
| ------------ | ------------ |
| default | 显示内容	  |
                </pre>
            </ly-markdown>
            <ly-page-footer>
                <el-button @click="onStep(-1)" type="primary">上一步</el-button>
                <el-button @click="onStep(1)" type="primary">下一步</el-button>
            </ly-page-footer>
        </ly-page-content>
    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    step: 0
                }
            },
            mounted: function () {

            },
            methods: {
                onStep: function (step) {
                    this.step += step;
                    if (this.step < 0) {
                        this.step = 0;
                    }
                    if (this.step > 4) {
                        this.step = 0;
                    }
                }


            }
        }
    })
</script>